<template>
  <div class="createPost-container">
    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">

      <sticky :z-index="10" :class-name="'sub-navbar '+ postForm.status">
        <el-button v-loading="loading" style="margin-left: 10px;" type="primary" icon="el-icon-s-promotion" @click="submitForm">
          发布
        </el-button>
      </sticky>

      <div class="createPost-main-container">
        <el-row type="flex" justify="space-between">
          <el-col :span="20">
            <el-form-item style="margin-bottom: 40px;" prop="title">
              <MDinput v-model="postForm.title" :maxlength="100" name="name" required>
                标题
              </MDinput>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="rate-des">
            <span class="demonstration">公告等级</span>
            <el-rate
              v-model="grade"
              :colors="colors"
            />
          </el-col>
        </el-row>
        <el-form-item prop="content" style="margin-bottom: 30px;">
          <el-skeleton v-if="show" :rows="8" animated />
          <Tinymce v-else ref="editor" v-model="postForm.content" v-loading="editorLoading" :height="400" />
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import MDinput from '@/components/MDinput'
import Sticky from '@/components/Sticky'
// 发布公告接口
import { publishNotice } from '@/api/notice'

const defaultForm = {
  title: '',
  content: ''
}
export default {
  name: 'ArticleDetail',
  components: { Tinymce, MDinput, Sticky },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validateRequire = (rule, value, callback) => {
      let fieldName
      if (rule.field === 'title') {
        fieldName = '标题'
      } else if (rule.field === 'content') {
        fieldName = '内容'
      }
      if (value === '') {
        this.$message({
          message: fieldName + '为必传项',
          type: 'error'
        })
        callback(new Error(fieldName + '为必传项'))
      } else {
        callback()
      }
    }
    return {
      postForm: Object.assign({}, defaultForm),
      loading: false,
      rules: {
        title: [{ validator: validateRequire }],
        content: [{ validator: validateRequire }]
      },
      // 公告等级
      grade: 0,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      editorLoading: false,
      // 由于富文本变价加载过慢，为了过渡添加 show 显示字段
      show: true
    }
  },
  created() {
    this.show = true
  },
  mounted() {
    setTimeout(() => {
      this.show = false
    }, 500)
  },
  methods: {
    async submitForm() {
      const query = { ...this.postForm, grade: this.grade }
      const res = await publishNotice(query)
      if (res && res.code === 200) {
        this.$notify({
          message: '发布成功',
          type: 'success'
        })
        this.postForm.title = ''
        this.grade = 0
      } else {
        this.$notify({
          message: '呜呜呜...出问题了',
          type: 'error'
        })
      }
      // 置空操作
      this.editorLoading = true
      this.$nextTick(() => {
        this.$refs.editor.clearContent()
        this.editorLoading = false
      })
      this.postForm.title = ''
      this.grade = 0
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }

  .rate-des {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .demonstration {
      padding: 5px 0;
      color: #9e9e9e;
      font-weight: 700;
    }
  }
}

.article-textarea ::v-deep {
  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}
</style>
